<template>
  <div class="page-bank-admin">
      <div v-bind:key="item" v-for="item in bankImg">
          <img :src="item"/>
      </div>
      
      <div class="item">
        <div class="icon"><img :src="aotherimg[2]"></div>
         <div class="des">
             <h2 class="bule">资金隔离</h2>
             <div class="detail">
                用户资金与平台资金全面隔离，由存管银行对用户资金进行操作管理，保障用户资金安全
             </div>
         </div>         
      </div>

       <div class="item">
        <div class="icon"><img :src="aotherimg[3]"></div>
         <div class="des">
             <h2 class="yellow">独立账户</h2>
             <div class="detail">
               为用户开设独立账户，账户信息由攀枝花银行依照规定和程序进行管理和监督
             </div>
         </div>         
      </div>

       <div class="item">
        <div class="icon"><img :src="aotherimg[4]"></div>
         <div class="des">
             <h2 class="red">交易安全</h2>
             <div class="detail">
              用户的每笔资金变动，均需用户发起并输入交易密码授权后，存管银行根据交易指令进行资金划转
             </div>
         </div>         
      </div>

        <div style="margin-top:4px"><img :src="aotherimg[0]"/></div>
        <div class="second_title">
            攀枝花银行成立于1997年9月，经人民银行总行对其经营业绩、资产质量、内部管理等综合审评，被评为“一类银行”。
        </div>
        <div class="four_itme" ref="item">
           <div class="item">
               <img :src="aotherimg[5]"><span>专业化团队<br/>服务和管理</span>
           </div>
            <div class="item">
              <img :src="aotherimg[6]"><span>综合能力<br/>排名前列</span>
           </div>
            <div class="item">
               <img :src="aotherimg[7]"><span>合规存管模式<br/>严密防范风险</span>
           </div>
            <div class="item">
              <img :src="aotherimg[8]"><span>独立法人资格<br/>的股份制银行</span>
           </div>
          
        </div>
         <img :src="aotherimg[1]"/>
  </div>
</template>

<script>
export default {
  data () {
      return {
          bankImg: [
               require("../../public/imgs/bank_admin_1.png"),
               require("../../public/imgs/bank_admin_2.png"),
               require("../../public/imgs/bank_admin_3.png"),    
                require("../../public/imgs/bank_admin_4.png"),     
          ],
          aotherimg:[           
               require("../../public/imgs/bank_admin_5.png"),
               require("../../public/imgs/bank_admin_6.png"), 
                require("../../public/imgs/bank_admin_ion1.png"),
               require("../../public/imgs/bank_admin_ion2.png"),  
                 require("../../public/imgs/bank_admin_ion3.png"),
               require("../../public/imgs/bank_admin_ion4.png"),     
                 require("../../public/imgs/bank_admin_ion5.png"),
               require("../../public/imgs/bank_admin_ion6.png"),    
                require("../../public/imgs/bank_admin_ion8.png"),        
          ]
          
      }
  },
 created () {
     this.$nextTick(function(){
   console.log(this.$refs.item.clientWidth)

     })
  
 }
}
</script>

<style lang="less">
.page-bank-admin{
    .second_title{
        padding: 0 40px 45px 40px;
        color:#21232b;
        font-size: 28px;
        line-height: 45px;
        
    }
    .four_itme{
        display: flex;
        align-items:center;
        flex-wrap: wrap;
        margin-bottom: 160px;
        box-sizing: border-box;
        padding: 0 40px;
        .item{
            width: 315px;
            height: 315px;
            margin-right: 40px;
          -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: #fff;
	-webkit-box-shadow: 4px 4px 15px rgba(204,204,204,.2);
	-moz-box-shadow: 4px 4px 15px rgba(204,204,204,.2);
	box-shadow: 4px 4px 15px rgba(204,204,204,.2);
	border: solid 1px #ddd;
            display: flex;
            justify-content: center;
            flex-wrap: wrap;
            align-items: center;
            span{
                width: 100%;
                text-align:center;
                color: #3c3e4a;
                font-size: 26px;
                padding-top: 24px;
                line-height: 35px;
            }
            img{
               width:110px;
            }
            &:nth-child(2n){
            margin-right: 0;
            }
        }
    
    }
    .item{
    width: 670px;
   -webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	background-color: #fff;
	-webkit-box-shadow: 4px 4px 15px rgba(204,204,204,.2);
	-moz-box-shadow: 4px 4px 15px rgba(204,204,204,.2);
	box-shadow: 4px 4px 15px rgba(204,204,204,.2);
	border: solid 1px #ddd;
    margin: 40px  auto 0px auto;
    display: flex;
    justify-content: space-between;
    padding: 50px 30px;
    align-items: center;
    box-sizing: border-box;
    .des{
        flex: 1;
        margin-left: 25px;
        h2{
            font-size: 34px;
            padding-bottom: 20px;
        }
        .bule{
            color: #5361f8
        }
         .yellow{
            color: #e7b774
        }
         .red{
            color: #f56671
        }
        .detail{
            color: #3c3e4a;
            font-size: 24px;
            line-height: 40px;
            letter-spacing: 2px;
        }
    }
    .icon{
        width: 100px;
    }
    }
}
</style>
